<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-08 13:02:29
-->
<template>
  <!-- 通知公告 -->
  <div class="notice">
    <!-- 第一行 -->
    <div class="back">
      <div class="wrapper">
        <div class="down_u">
          <div class="notice_tit">通知公告</div>
          <ul class="notice_ul">
            <li v-for="(b, index) in a" @click="toArticleHandler(b)" :key="b.id">
              <div class="p" v-if="index < 6">
                <div class="notice_date">
                  <p class="p1">{{ index + 1 }}</p>
                  <p class="p2">{{ b.publishTime | fmtDate }}</p>
                </div>
                <p class="p3">{{ b.title }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /第一行 -->

    <!-- 第二行 -->
    <div class="wrapper">
      <div class="down_d">
        <div class="down_h">
        <!-- 左部分 -->
        <div class="l">
          <div class="l_tit">
            团学动态
            <img src="/resources/images/more.png" alt="" />
          </div>
          <ul class="l_ul">
            <li v-for="(b, index) in a" @click="toArticleHandler(b)" :key="b.id" v-if="index < 4">
              <div class="l_li">
                <div class="l_date">{{ index + 1 }}</div>
                <p class="p4">{{ b.title }}</p>
              </div>
            </li>
          </ul>
        </div>
        <!-- /左部分 -->
        <!-- 右部分 -->
        <div class="r">
          <div class="r_tit">快捷通道</div>
          <ul class="r_ul">
            <li><img src="/resources/images/td1.png" alt="" /></li>
            <li><img src="/resources/images/td2.png" alt="" /></li>
            <li><img src="/resources/images/td3.png" alt="" /></li>
            <li><img src="/resources/images/td4.png" alt="" /></li>
          </ul>
        </div>
        <!-- /右部分 -->
        </div>
      </div>
      <!-- /第二行 -->
    </div>
  </div>
  <!-- /通知公告 -->
</template>

<style lang="scss" scoped>
.notice {
  // 第一行
  .back {
    background-image: url("/resources/images/tzbg.png");
    .wrapper {
      .down_u {
        padding: 20px 0 20px 0;
        height: 450px;
        // 标题
        .notice_tit {
          font-size: 30px;
          text-align: center;
          color: #fff;
        }
        .notice_ul {
          line-height: 1.6;
          margin: 60px;
          li {
            color: #fff;
            width: 266px;
            height: 120px;
            border: 1px solid #fff;
            padding: 0 18px;
            margin-right: 30px;
            margin-top: 50px;
            float: left;
            ::after {
              clear: both;
            }
            .p {
              .notice_date {
                width: 82px;
                height: 82px;
                text-align: center;
                background-color: #ff8c7a;
                margin-top: -34px;
                float: left;
                .p1 {
                  font-size: 30px;
                  margin: 0;
                }
                .p2 {
                  margin-top: 0;
                }
              }
              .p3 {
                padding: 15px 0 18px 95px;
                font-size: 16px;
              }
              .p3:hover{
                color:#0099FF;
              }
            }
          }
          li:nth-child(3n) {
            margin-right: 0px;
          }
        }
      }
    }
  }
  // 第二行
  .wrapper {
    .down_d {
      font-size: 30px;
      color: #000;
      font-weight: bold;
      padding: 50px;
      // 左部分
      & > .down_h::after{
      display:  block;
      content:'';
      clear:both;
      }
      .l {
        width: 490px;
        float: left;
        margin-right: 50px;
        img {
          float: right;
        }
        .l_ul {
          li {
            font-size: 20px;
            width: 201px;
            height: 30px;
            float: left;
            height: 60px;
            margin-top: 20px;
            border: 1px solid #d6d6d6;
            margin-right: 4%;
            padding: 15px;
            .l_li {
              .l_date {
                width: 80px;
                height: 30px;
                line-height: 30px;
                margin-top: -25px;
                margin-bottom: 8px;
                background: #fff;
                margin-left: 12px;
                text-align: center;
                color: #385284;
                font-size: 24px;
              }
              .p4 {
                margin-top: 0;
                color: #434343;
                font-size: 16px;
              }
              .p4:hover{
                color:#0099FF;
              }
            }
          }
          li:nth-child(2n) {
            margin-right: 0px;
          }
        }
      }
      // 右部分
      .r {
        width: 460px;
        float: right;
        .r_ul {
          li {
            float: left;
            margin-top: 29px;
            margin-right: 30px;
            img {
              width: 214px;
            }
          }
          li:nth-child(2n) {
            margin-right: 0px;
          }
        }
      }
    }
  }
}
</style>

<script>
import { get } from "../utils/request";

export default {
  // 1. 数据
  data() {
    return {
      loading: false,
      categoryArticles: [],
      a: [],
    };
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created() {
    this.loadCategoryArticles();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods: {
    toArticleHandler(article) {
      this.$router.push({
        path: "/article",
        query: {
          id: article.id,
          name: article.category ? article.category.name : "",
        },
      });
    },
    // 加载板块数据
    loadCategoryArticles() {
      this.loading = true;
      let a = [];
      let url = "/index/article/findCategoryArticles";
      get(url).then((resp) => {
        this.categoryArticles = resp.data;
        for (let item of this.categoryArticles) {
          for (let item of item.aritcle) {
            if (a.length < 6) {
              a.push(item);
            }
          }
        }
        this.a = a;
      }).finally(()=> {
        this.loading = false;
      });
    },
  },
};
</script>